<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
    </head>
    <body>
        <!-- 
            绑定数据有两种形式：
            1.单向绑定：通过v-bind:attribute可以单向绑定数据，数据只能从data流向元素，
                修改data数据，v-bind:attribute绑定的属性数据实时更新，但是修改v-bind:attribute绑定的属性数据，data数据不会实时更新
                v-bind:attribute可以简写成:attribute
            2.双向绑定：通过v-model:value可以双向绑定数据，数据可以双向流动
                修改data数据，通过v-model:value绑定的数据实时更新，并且更改v-model:value绑定的元素数据，data数据也会实时更新
                v-model绑定的是value属性，所以v-model:value只有表单元素可以使用，比如input、select等等
                v-mode:value可以简写成v-model
            -->

        <div id="root">
            v-bind:value形式绑定数据：<input v-bind:value="name" />
            <br />
            v-model:value形式绑定数据：<input v-model:value="name" />
            <br />
            <h1>简写形式</h1>
            v-bind:value ==> :value ：<input :value="name" />
            <br />
            v-model:value ==> v-model ：<input v-model="name" />
        </div>

        <script>
            const vm = new Vue({
                el: "#root",
                data: {
                    name: "xuhu",
                },
            });
        </script>
    </body>
</html>
